$(function () {
  /* 
  页面功能分析:
  0 建议所有的变量都放在代码的最前面 function的前面 
  1 下拉刷新  复杂数据的渲染建议使用模版引擎 
    a 页面初始化 
      1 先构造请求参数 
        a 根据url上的参数 key->proName 产品名称
          1 
        b 去查看api文档
    b 点击搜索按钮
      1 获取商品名称
      2 把名称赋值给 全局查询参数对象 QueryObj.proName
      3 手动触发 下拉刷新 
        因为下拉刷新组件里面 已经包含了请求数据的代码 
    c 点击排序的按钮
      1 切换 箭头方向
      2 需要知道点击的是谁 是价格还是数量
      3 根据箭头的方向来判断 是升序还是降序 
      4 手动触发 下拉刷新 
  2 上拉加载下一页
    1 计算总页数 TotalPage
      a 查看返回值 
        count 总条数 pageSize 页容量 
                          6/4=1.2333
                 count=6    pageSize   =3   
        总页数 =Math.ceil(count/pageSize)
        TotalPage=Math.ceil(count/pageSize);
    2 拿当前页 QueryObj.page和TotalPage
      a 如果超过了 返回 不执行
      b 不超过-> QueryObj.page++ 然后再发送请求 
  3 点击商品页面跳转
    1 最简单 点击a标签 href属性写上 路径就可以了
    2 在mui中 上拉刷新和下拉加载组件中   a标签的跳转被禁止
    3 因为我们只是在做移动web 不是app 所以还是需要a标签的跳转功能
    4 给a标签绑定一个tap事件
        location.href=a.href;

   */


  // 请求参数对象
  var QueryObj = {
    // 产品名称
    proName: $.getQueryString("key"),
    // 品牌id
    brandId: "",
    // 安装价格排序 1 升序 2 降序 
    price: "",
    // 数量排序
    num: "",
    // 第几页
    page: 1,
    // 页容量 
    pageSize: 4
  };

  // 总页数
  var TotalPage = 1;

  init();

  function init(params) {
    // 初始化下拉是刷新和上拉加载
    mui.init({
      pullRefresh: {
        container: "#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
        down: {
          height: 50,//可选,默认50.触发下拉刷新拖动距离,
          auto: true,//可选,默认false.首次加载自动下拉刷新一次
          contentdown: "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
          contentover: "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
          contentrefresh: "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
          callback: function () {
            // 在触发下拉的时候 把page重新设为1 
            QueryObj.page = 1;
            // 发送请求
            queryProduct(function (result) {
              // 渲染模版
              var html = template("goodsTpl", result);
              $(".lt_goods_ul").html(html);
              // 结束下拉刷新
              mui('#refreshContainer').pullRefresh().endPulldownToRefresh();

              // 重置上拉控件的提示
              // 重置组件
              // 因为在请求完了数据之后 上拉的提示变成了 没有数据了
              // 当重新执行下拉刷新的时候 应该把上拉也重置->重新让它实现加载下一页的功能
              mui('#refreshContainer').pullRefresh().refresh(true);
            });
          }
        },
        up: {
          height: 50,//可选.默认50.触发上拉加载拖动距离
          auto: true,//可选,默认false.自动上拉加载一次
          contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
          contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
          callback: function () {
            // 执行加载下一页
            // 判断当前页有没有超过总页数
            if (QueryObj.page >= TotalPage) {
              // 不在请求新的数据
              // 给出用户提示信息 
              //  是否还有更多数据；若还有更多数据，则传入false; 否则传入true，之后滚动条滚动到底时，将不再显示“上拉显示更多”的提示语，而显示“没有更多数据了”的提示语；
              mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
              return;
            } else {
              // 继续请求新的数据
              QueryObj.page++;
              queryProduct(function (result) {
                // 渲染数据 追加到数据的下面
                var html = template("goodsTpl", result);
                $(".lt_goods_ul").append(html);
                // 结束上拉加载
                mui('#refreshContainer').pullRefresh().endPullupToRefresh();
              })
            }
          }
        }
      }
    });

    // 绑定搜索按钮
    $(".searchBtn").on("tap", function () {
      // console.log(123);

      var key = $(".searchTxt").val();
      QueryObj.proName = key;
      // console.log(QueryObj);

      // 手动触发下拉刷新
      mui("#refreshContainer").pullRefresh().pulldownLoading();
    })

    // 点击排序按钮
    $(".order_tool>a").on("tap", function (e) {


      // 因为e.target不一定选中的是a标签 也可能是span标签
      var aDom = e.target.nodeName == "A" ? e.target : e.target.parentNode;
      // console.log(aDom);
      // 获取需要排序的字段
      var sortName = aDom.dataset.sortname;

      // 切换箭头方向
      // find 从父元素里面找到里面的子元素 
      // toggleClass 有的话移除 没有的就添加 
      $(aDom).find(".mui-icon").toggleClass("mui-icon-arrowdown mui-icon-arrowup ");


      // 升序还是降序
      var sort = 1;

      // 判断升序还是降序
      if ($(aDom).find(".mui-icon").hasClass("mui-icon-arrowdown")) {
        // 降序  2 
        sort = 2;
      } else {
        // 升序 1
        sort = 1;
      }

      // 改变全局查询参数对象
      // 对象使用属性的方式有两种
      // obj.pro
      // obj[]


      QueryObj.num = "";
      QueryObj.price = "";
      QueryObj[sortName] = sort;

      // 手动触发下拉刷新
      mui("#refreshContainer").pullRefresh().pulldownLoading();
    })

    // 重启a标签的跳转功能
    $(".lt_goods_ul").on("tap","a",function (e) {
      var aDom=e.target;
      // 页面跳转
      location.href=aDom.href;
    })
  }

  // 请求产品数据
  function queryProduct(callback) {
    // console.log(QueryObj);
    // $.ajax
    // $.get("url","请求参数","回调函数")
    $.get("/product/queryProduct", QueryObj, function (result) {
      // console.log(result);
      callback && callback(result);

      // 计算总页数
      TotalPage = Math.ceil(result.count / QueryObj.pageSize);

      // console.log(TotalPage);
    })
  }
})